$user-info: (
  'padding': getCssVar(spacing, base),
  'color': getCssVar('color', 'text', 0),
  'font-size': getCssVar('font-size', 'header-4'),
  'hover-color': getCssVar(color, text, 0),
  'hover-bg-color': getCssVar(color, primary, hover),
  'border-radius': getCssVar(border-radius, medium),
);

@include b(user-info) {
  @include set-component-css-var('user-info', $user-info);

  @include flex(row, flex-start, center);

  width: 100%;
  height: 100%;

  .el-dropdown {
    padding: calc(getCssVar(user-info, padding) / 2) getCssVar(user-info, padding);
    cursor: pointer;
    border-radius: getCssVar(user-info, border-radius);

    &:hover {
      color: getCssVar(user-info, hover, color);
      background-color: getCssVar(user-info, hover, bg, color);
    }
  }
}

@include b(user-info-avatar) {
  margin-right: 10px;
}

@include b(user-info-label) {
  @include flex(row, flex-start, center);

  font-size: getCssVar(user-info, font-size);
  color: getCssVar(user-info, color);
  outline: none;
}
